import React, { Component } from 'react';
import { Image } from 'antd'
import { Link } from 'react-router-dom'

import { LikeOutlined, CommentOutlined } from '@ant-design/icons'

import './style.scss'

interface article_type {
  id:string
}

class ListItem extends Component<article_type> {

  onArticle = (id:string) => {
    let path = `/article/${id}`
    window.open(path)
  }

  render() {
    const { id } =  this.props
    return (
      <li className="article-item" onClick={e => this.onArticle(id)}>
        <div className="info-box">
          <ul className="meta-list">
            <li className="userName">
              <Link to="/user/1">
                猪突猛进
              </Link>
            </li>
            <li className="date">10天前</li>
          </ul>
          <h2 className="info-title">
            <Link target="_blank" to={`/about/${id}`}>
              你会在 GitHub 上面找项目吗？我会哦！
            </Link>
          </h2>
          <ul className="operion-box">
            {/* active */}
            <li className="item link ">
              <LikeOutlined />
              <span className="count">123</span>
            </li>
            <li className="item comment">
              <CommentOutlined />
              <span className="count">123</span>
            </li>
          </ul>
        </div>
        {
          Math.random() > 0.5
          ? (
            <Image className="info-img" width={60} height={60} src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/38e8bd95f91c4c3fa7dd9f8b20dd0b55~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:120:120.awebp" preview={false} />
          )
          : null
        }
      </li>
    );
  }
}

export default ListItem;